<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../../vue.js"></script>
    <title>Document</title>
</head>

<body>
    <div class="root">
        <h1>今天天气很{{inFo}}</h1>
        <button @click="t">切换天气</button>
        <button @click="isHot = !isHot">切换天气</button>
        <hr>
        <h2>a:{{numbers.a}}</h2>
        <button @click="numbers.a++">点击a+1</button>
        <h2>b:{{numbers.b}}</h2>
        <button @click="numbers.b++">点击b+1</button>
    </div>
</body>
<script>
    const vm = new Vue({
        // 数据
        data() {
            return {
                isHot: true,
                numbers: {
                    a: 1,
                    b: 1
                }
            }
        },
        // 方法
        methods: {
            t() {
                this.isHot = !this.isHot
            }
        },
        // 计算属性
        computed: {
            inFo() {
                return this.isHot ? '凉爽' : '炎热'
            }
        },
        // 第一种监听方式
        watch: {
            // 完整写法
            // isHot: {
            //     // 当ishot发送改变时 handler被调用
            //     handler(newValue, oldValue) {
            //         console.log(`isHot被修改${newValue}+${oldValue}`)
            //     },
            //     immediate: true  //初始化时立即执行一次
            // },
            isHot(newValue,oldValue){
                console.log('新旧交替' + newValue +'旧值：' + oldValue)
            },
            numbers: {
                handler() {
                    console.log('numbers被改变')
                },
                deep: true // 深度监视
            }
        },
    }).$mount('.root')

    // vm.$watch('numbers', {
    //     deep: true,
    //     handler(newValue, oldValue) {
    //         console.log('numbers:' + newValue + oldValue)
    //     }
    // })
</script>

</html>